<link rel="stylesheet" href="/assets/home/css/swiper-bundle.css" />
<script src="/assets/home/js/swiper-bundle.min.js"></script>
<style>
    * {
        touch-action: pan-y;
    }

    body {
        font-family: 'Microsoft YaHei';
    }

    p {
        font-size: 4.5vw;
    }

    h5 {
        padding-top: 8px;
        padding-bottom: 8px;
        text-indent: 12px;
    }

    .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body {
        font-size: 15px;
        margin-top: 8px;
        color: #333;
    }

    .mui-bar-nav~.mui-content {
        padding-top: 0;
    }
    html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
      }

      .swiper {
        width: 100%;
        height: 100%;
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide a {
        display: block;
        width: 100%;
        height: 100%;
      }

      .swiper-slide a  img{
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
</style>
{include file="common/meta" /}
<div class="mui-content">
    <!-- 轮播 -->
    <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            {foreach($SubjectList as $item)}
            <div class="swiper-slide">
                <a style="height: 250px;">
                    <img src="{$item['thumbs_cdn']}">
                    <p class="mui-slider-title" style="background-color:#5b5555;color:white;">{$item['title']}</p>
                </a>
            </div>
          {/foreach}
        </div>
        <div class="swiper-pagination" style="text-align: right;"></div>
    </div>
</div>
<div class="weui-search-bar" id="searchBar">
    <form class="weui-search-bar__form" style="height: 30px;" onclick="location.href = `{:url('home/index/search')}` ">

        <div class="weui-search-bar__box">
            <i class="weui-icon-search"></i>
            <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required />
            <a  class="weui-icon-clear" id="searchClear"></a>
        </div>
        <label class="weui-search-bar__label" id="searchText">
            <i class="weui-icon-search"></i>
            <span> 搜索</span>
 
        </label>
    </form>
    <a href="javascript:" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
</div>
<div class="mui-content" style="background-color:#fff">
    <h5 style="background-color:#efeff4">前端课程</h5>
    <ul class="mui-table-view mui-grid-view">
        {foreach $operationone as $item}
        <li class="mui-table-view-cell mui-media mui-col-xs-6">
            <a href="{:url('/home/user/subject/details',['cid' => $item['id']])}">
                <div style="height: 120px; width: 150px; overflow:hidden; ">
                    <img class="mui-media-object" src="{$item['thumbs']}"  style="min-width:100%; min-height:100%;height: auto; width: auto;">
                </div>
                <div class="mui-media-body">{$item['title']}</div>
            </a>
        </li>
        {/foreach}
    </ul>
</div>
<div class="mui-content" style="background-color:#fff">
    <h5 style="background-color:#efeff4">后端课程</h5>
    <ul class="mui-table-view mui-grid-view">
        {foreach $operationtwo as $item}
        <li class="mui-table-view-cell mui-media mui-col-xs-6">
            <a href="{:url('/home/user/subject/details',['cid' => $item['id']])}">
                <div style="height: 120px; width: 150px; overflow:hidden; ">
                    <img class="mui-media-object" src="{$item['thumbs']}"  style="min-width:100%; min-height:100%;height: auto; width: auto;">
                </div>
                <div class="mui-media-body">{$item['title']}</div>
            </a>
        </li>
        {/foreach}
    </ul>
</div>
<div class="mui-content" style="background-color:#fff">
    <h5 style="background-color:#efeff4">全栈课程</h5>
    <ul class="mui-table-view mui-grid-view">
        {foreach $operationtri as $item}
        <li class="mui-table-view-cell mui-media mui-col-xs-6">
            <a href="{:url('/home/user/subject/details',['cid' => $item['id']])}">
                <div style="height: 120px; width: 150px; overflow:hidden; ">
                    <img class="mui-media-object" src="{$item['thumbs']}"  style="min-width:100%; min-height:100%;height: auto; width: auto;">
                </div>
                <div class="mui-media-body">{$item['title']}</div>
            </a>
        </li>
        {/foreach}

    </ul></br></br></br>
</div>

{include file="common/footer" /}

<script>
var mySwiper = new Swiper('.swiper',{
pagination : '.swiper-pagination',
    paginationClickable: true,
    longSwipesRatio: 0.3,
    touchRatio:1,
    observer:true,//修改swiper自己或子元素时，自动初始化swiper
    observeParents:true,//修改swiper的父元素时，自动初始化swiper
})
</script>